<template>
	<view class="mine-page">
		<image class="bg" src="../static/images/mine/background.png" mode=""></image>
		<!-- <nav-bar title="运车网" :showLeftIcon="true" :leftSlot="false" :backgroundColor="'transparent'"></nav-bar> -->
		
		<view class="bac">
			<scroll-view class="content-box" scroll-y>
				<view class="head">
					<view class="head-img">
						<image style="width: 120rpx; height: 120rpx;"
							:src="userProfile" mode="widthFix"></image>
						<!-- <u-icon v-else name="account-fill" size="120rpx" color="#e1e1e1"></u-icon> -->
					</view>
					<view class="profile" v-if="pointsInfo && pointsInfo.isApproved == 2">
						<text >{{pointsInfo.networkPointsName}}</text>
						<view>
							<text>{{userInfo.userName}}</text>
							<text>网点用户</text>
						</view>
					</view>
					<view class="profile" v-else-if="companyInfo && companyInfo.isApproved == 2">
						<text >{{companyInfo.companyName}}</text>
						<view>
							<text>{{userInfo.userName}}</text>
							<text>承运商用户</text>
						</view>
					</view>
					
					<view class="profile" v-else>
						<text>{{userInfo.nickName || '用户'}}</text>
						<view>
							<text>{{userInfo.userName}}</text>
							<text>普通用户</text>
						</view>
					</view>
					
					<view class="news" @click="toMessage">
						<image style="width: 48rpx; height: 48rpx;" src="@/static/images/mine/sellCar.png"
							mode="widthFix"></image>
							<text class="message-tip" v-if="isMessageTip"></text>
					</view>
				</view>
<!-- 				<view class="business">
					<view style="background: linear-gradient(to bottom right, #FDF6F2, #ffffff 30%);" @click="navigator('/subPages/mine/buyCar')">
						<view>
							<text>我想买车</text>
							<text>精准报价 在线咨询</text>
						</view>
						<image style="width: 48rpx; height: 48rpx;" src="@/static/images/mine/buyCars.png"
							mode="widthFix">
						</image>
					</view>
					<view style="background: linear-gradient(to bottom right, #F2F6FD, #ffffff 30%);"  @click="navigator('/subPages/mine/sellingCars')">
						<view>
							<text>我想卖车</text>
							<text>精准报价 在线咨询</text>
						</view>
						<image style="width: 48rpx; height: 48rpx;" src="@/static/images/mine/sellar.png"
							mode="widthFix">
						</image>
					</view>
				</view> -->
				<view class="mineList">
					<view class="item-list" v-for="item,index in mineList" :key="index" @click="clickSkip(item)">
						<image style="width: 42rpx; height: 42rpx;" :src="item.icon" mode="widthFix"></image>
						<text>{{item.title}}</text>
						<image style="width: 42rpx; height: 42rpx;" src="@/static/images/mine/enter.png"
							mode="widthFix"></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getToken, checkToken } from '@/utils/auth'
	import Common from '@/api/common.js'
	import UserCenter from "@/api/userCenter.js"
	export default {
		name: 'UserCenter',
		data() {
			return {
				mineList: [{
						title: '我的发布',
						icon: '../static/images/mine/publish.png',
						path: '/subPages/mine/myRelease',
					},
					{
						title: '我想买的',
						icon: '../static/images/mine/agreement.png',
						path: '/subPages/mine/buyCar',
					},
					// {
					// 	title: '身份认证',
					// 	icon: '../static/images/mine/authentication.png',
					// 	path: '',
					// },
					{
						title: '平台协议',
						icon: '../static/images/mine/agreement.png',
						path: '/subPages/mine/agreement',
					},
					{
						title: '关于我们',
						icon: '../static/images/mine/aboutUs.png',
						path: '/subPages/mine/about',
					},
				],
				// 用户信息
				userInfo: {},
				// 网点信息
				pointsInfo: {},
				// 承运商信息
				companyInfo: {},
				userName: '',
				userProfile: '',
				isCarrier: '',
				companyname: '',
				nickName: '',
				isMessageTip: false
			}
		},

		onLoad() {
			
		},
		onShow() {
			// 用户角色
			// this.isCarrier = uni.getStorageSync('isCarrier');
			this.userProfile = uni.getStorageSync('userProfile') || '../static/images/headerDefault.png'
			Common.getInfo().then(res => {
				this.userInfo = res.user;
				this.companyInfo = res.companyInfo;
				this.pointsInfo = res.crmNetworkInfo;
				uni.setStorageSync('userId', res.user.userId);
				this.getMessageList();
			})
			
		},
		methods: {
			clickSkip(item) {
				if(item.title == "我的发布") {
					if(!checkToken()) {
						return;
					}
				}
				uni.navigateTo({
					url: item.path
				})
			},
			toMessage() {
				uni.navigateTo({
					url: '/subPages/mine/message'
				})
			},
			navigator(url) {
				uni.navigateTo({
					url
				})
			},
			async getMessageList() {
				let res = await UserCenter.getMessageList();
				let list = res.rows || [];
				this.isMessageTip = list.some(ele => ele.isRead == 0);
				console.log(this.isMessageTip)
				
			},
		}
	}
</script>
<style lang="scss" scoped>
	.mine-page {
		background: #f4fbff;
		height: 100vh;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
		}
		.bac {
			min-height: calc(100vh - 100rpx);
			width: 100%;
			background: url('/static/images/mine/background.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.nav {
			height: 104rpx;
		}

		.content-box {
			padding: 0 30rpx;
			margin-top: 40rpx;

			.head {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				.head-img {
					border: 4rpx solid #e1e1e1;
					border-radius: 50%;
					width: 120rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.profile {
					display: flex;
					flex-direction: column;
					width: calc(100% - 180rpx);
					padding: 10rpx 20rpx;
					color: #ffffff;
					
					>text {
						font-size: 36rpx;
					}

					view {
						font-size: 24rpx;
						margin-top: 14rpx;
						text {
							margin-right: 20rpx;
						}
					}
				}

				.news {
					position: relative;
					padding: 6rpx;

					.message-tip {
						display: inline-block;
						position: absolute;
						right: 0;
						top: 0;
						width: 12rpx;
						height: 12rpx;
						background: #FF3C24;
						z-index: 99;
						border-radius: 12rpx;
					}
				}
			}

			.business {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;

				>view {
					display: flex;
					align-items: center;
					padding: 20rpx 30rpx;
					width: calc(50% - 10rpx);
					box-sizing: border-box;
					border-radius: 10rpx;

					>view {
						width: calc(100% - 48rpx);
						font-size: 26rpx;

						text {
							font-weight: 550;
							display: block;
							line-height: 36rpx;

							&:last-child {
								line-height: 30rpx;
								font-size: 20rpx;
								font-weight: normal;
								opacity: 0.5;
							}
						}
					}
				}
			}

			.mineList {
				margin-top: 20rpx;
				padding: 10rpx 30rpx;
				border-radius: 24rpx;
				background: #FFF;

				.item-list {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;

					text {
						width: calc(100% - 90rpx);
						padding-left: 20rpx;
						font-size: 30rpx;
						font-family: "PingFang SC";
					}
				}
			}
		}
	}
</style>